<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        h1{
            text-align: center;
            margin: 0px 20px;
        }
        .father{
            width: 70%;
            margin: auto;
            padding: 100px;
        }
        table{
            width: 100%;
            text-align: center;
        }
        tr:nth-of-type(2n+1){
            background: #8df08c;
        }
        textarea{
            overflow-y: scroll;
            resize: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            init();
            add();
        })
        var invid=location.search;
        function init() {
            $("tr:gt(2)").remove();
            $.ajax({
                url:"getreplysbyinvid"+invid,
                dataType:"json",
                async:false,
                success:function(replys){
                    $(replys).each(function(i,reply){
                        var tr=$("<tr></tr>");
                        var td1=$("<td>"+reply.content+"</td>");
                        var td2=$("<td>"+reply.author+"</td>")
                        var td3=$("<td>"+reply.createdate+"</td>")
                        tr.append(td1,td2,td3);
                        $(".table1").append(tr);
                    })
                }
            })
        }
        function add(){
            $("#add").click(function(){
                $(".one").hide();
                $(".two").show();
            })
            $("#back").click(function(){
                $(".one").show();
                $(".two").hide();
                $(".clear").val("");
            })
            $("#save").click(function(){
                var content=$("form [name=content]").val();
                if (content==null||content.trim()==""){
                    alert("内容不能为空")
                    return false;
                }
                $.ajax({
                    url:"addreplysbyinvid"+invid,
                    data:$("form").serialize(),
                    success:function(re){
                        if (re.trim()=="ok"){
                            alert("添加成功")
                            $(".one").show();
                            $(".two").hide();
                            $(".clear").val("");
                            init();
                        }
                    }
                })
            })
        }
    </script>
</head>
<body>
<div class="father">
    <div class="one">
        <table class="table1">
            <tr>
                <h1>回复信息列表</h1>
            </tr>
            <tr>
                <a href="javascript:;" id="add">添加回复</a>
                <a href="toshow">返回帖子列表</a>
            </tr>
            <tr>
                <th>回复内容</th>
                <th>回复呢称</th>
                <th>发布时间</th>
            </tr>
        </table>
    </div>
    <div class="two" style="display: none">
        <form>
                添加回复<br>
               <span>回复内容：</span>
            <textarea name="content" cols="30" rows="5" class="clear" ></textarea><br>
                <span>回复昵称：</span>
                        <input type="text" name="author" class="clear">
            <br>
                    <input type="button" value="提交" id="save">
                    <input type="button" value="返回" id="back">
        </form>

    </div>
</div>
</body>
</html>